@(junctionId: String, kind: String)(implicit request: play.api.mvc.RequestHeader)
	@main("Junction Detail") {

		<style>

				.radio, .checkbox {
					position: relative;
					display: block;
					margin-top: 5px;
					margin-bottom: 10px;
				}

				.form-group {
					margin-top: 20px;
				}

				.myDiv {
					margin-top: 20px;
				}

				.mySelected {
					background-color: #2aabd2;
					color: white;
				}

				.mySelected:hover {
					background-color: #2aabd2;
					color: white;
					cursor: default !important;
				}

				.form-horizontal .has-feedback .form-control-feedback {
					top: 0;
					right: -15px;
				}

				.toggling > .toggle {
					width: 62px !important;
					height: 35px !important
				}


		</style>

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4"><span id="kindTitle"></span> Junction Detail</h2>
			</div>
		</div>

		<ul class="nav nav-tabs">
			<li class="active">
				<a href="#summary" data-toggle="tab" > Summary </a>
			</li>

			<li class="" id="expressLi">
				<a href="#boxplot" data-toggle="tab" > Expression DIY</a>
			</li>

			<li class="" id="survivalLi">
				<a href="#survival" data-toggle="tab" aria-collapseed="false"> Survival</a>
			</li>
		</ul>

		<div id="myTabContent" class="tab-content">

			<div class="tab-pane  fade in active" id="summary">

				<div class="table-responsive" style="margin-top: 20px">
					<table id="table" class="table table-striped table-hover table-bordered" style="table-layout: fixed;
						word-wrap: break-word">
						<tbody>

						</tbody>
					</table>
				</div>

				<h4 class="bold" style="margin-top: 20px;
					font-size: 17px" id="imageTitle">Junction Expression Profile</h4>

				<div id="tcgaResult" >

					<h4 style="margin-top: 20px">TCGA pan-cancers</h4>

					<form class="form-horizontal" method="get" id="form">
						<div class="form-group">
							<label class="control-label col-sm-3">Log<sub>2</sub>(CPM+1) Scale:</label>
							<div class="col-sm-8 toggling">
								<input id="logScale" type="checkbox" checked data-toggle="toggle" data-on="yes" data-off="no"
								onchange="DetailInfo.tcgaLogChange(this)" name="logScale" style="width: 100px">
							</div>
						</div>
					</form>


					<div id="tcgaCharts" align="center">

						<div class="btn-group" style="float: right">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							>
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'png')">
										Download PNG image
									</a>
								</li>

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'jpeg')">
										Download JPEG image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'pdf')">
										Download PDF image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('genePatternImage', 'svg')">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>

						<input type="hidden" name="pdfBase64">
						<img src="" id="genePatternImage" style="width: 100%">
					</div>

					<hr>
				</div>

				<div id="gtexResult">
					<h4 style="margin-top: 20px">GTEx</h4>

					<form class="form-horizontal" method="get" id="form">

						<div class="form-group">
							<label class="control-label col-sm-3">Log<sub>2</sub>(CPM+1) Scale:</label>
							<div class="col-sm-3 toggling">
								<input type="checkbox" checked data-toggle="toggle" data-on="yes" data-off="no" data-size="xs"
								onchange="DetailInfo.gtexLogChange(this)">
							</div>
						</div>

					</form>

					<div id="gtexCharts" align="center">

						<div class="btn-group" style="float: right">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							>
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('gtexImage', 'png')">
										Download PNG image
									</a>
								</li>

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('gtexImage', 'jpeg')">
										Download JPEG image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('gtexImage', 'pdf')">
										Download PDF image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('gtexImage', 'svg')">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>

						<input type="hidden" name="pdfBase64">
						<img src="" id="gtexImage" style="width: 100%">
					</div>

				</div>


			</div>

			<div class="tab-pane " id="boxplot">

				<h4 style="margin-top: 20px;
					font-size: 17px">Junction Expression on Box plots</h4>

				<form class="form-horizontal" method="get" id="form">

					<input type="hidden" name="junctionId" value="@junctionId">

					<div class="form-group">
						<label class="control-label col-sm-2">Datasets Selection (Cancer name):</label>
						<div class="col-sm-6">
							<select class="form-control" name="kinds[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2">Log<sub>2</sub>(CPM+1) Scale:</label>
						<div class="col-sm-6 toggling">
							<input class="form-control" type="checkbox" checked data-toggle="toggle" data-on="yes"
							data-off="no" width="100%" name="logScale"
							>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-2 col-sm-3">
							<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="DetailInfo.boxplotRun">
								Run</button>
						</div>
					</div>
				</form>

				<hr>

				<div id="result" style="display: none">

					<h4 style="margin-top: 20px">Image Result</h4>

					<div id="boxplotCharts" align="center">

						<div class="btn-group" style="float: right">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							>
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('boxplotImage', 'png')">
										Download PNG image
									</a>
								</li>

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('boxplotImage', 'jpeg')">
										Download JPEG image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('boxplotImage', 'pdf')">
										Download PDF image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('boxplotImage', 'svg')">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>

						<input type="hidden" name="pdfBase64">
						<img src="@routes.Assets.at("images/plot1.png")" id="boxplotImage" style="width: 100%">
					</div>

				</div>


			</div>

			<div class="tab-pane " id="survival">

				<h4 style="margin-top: 20px;
					font-size: 17px">Survival plots</h4>

				<form class="form-horizontal" method="get" id="form">

					<input type="hidden" name="junctionId" value="@junctionId">

					<div class="form-group">
						<label class="control-label col-sm-2">Datasets Selection (Cancer name):</label>
						<div class="col-sm-3">
							<select class="form-control" name="kind" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2">Methods:</label>
						<div class="col-sm-3">
							<select class="form-control" name="methods" style="width: 100%">
								<option value="os">Overall Survival (OS)</option>
								<option value="PFI">Progression Free Survival (PFS)</option>
							</select>
						</div>
						<label class="control-label col-sm-2">Group Cutoff:</label>
						<div class="col-sm-3">
							<select class="form-control" name="groupCutoff" style="width: 100%">
								<option value="median">Median</option>
								<option value="mean ">Mean</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-2 col-sm-3">
							<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="DetailInfo.survivalRun">
								Run</button>
						</div>
					</div>
				</form>

				<hr>

				<div id="result" style="display: none">

					<h4 style="margin-top: 20px">Kaplan-Meier curve</h4>

					<div id="survivalCharts" align="center">

						<div class="btn-group" style="float: right">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							>
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('survivalImage', 'png')">
										Download PNG image
									</a>
								</li>

								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('survivalImage', 'jpeg')">
										Download JPEG image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('survivalImage', 'pdf')">
										Download PDF image
									</a>
								</li>
								<li>
									<a href="javascript:;" onclick="Tool.downloadImage('survivalImage', 'svg')">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>

						<input type="hidden" name="pdfBase64">
						<img src="@routes.Assets.at("images/plot1.png")" id="survivalImage" style="width: 60%">
					</div>


				</div>

			</div>

		</div>

		<script>
				var junctionId = "@junctionId"
				var kind = "@kind"
				$(function () {
					DetailInfo.init
				})
		</script>


	}
